<script setup lang="ts">
// 获取屏幕安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets)

const back = () => {
  uni.navigateBack()
}

const params = defineProps<{
  title: string
}>()
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!--  #ifndef  MP-ALIPAY -->
    <view class="back" @tap="back"><uni-icons type="left" size="20" /></view>

    <!--  #endif -->
    <view class="title">
      <text>{{ params.title }}</text>
    </view>
  </view>
</template>

<style lang="scss">
.navbar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: left;
  // #ifdef MP-ALIPAY
  justify-content: start;
  width: 100%;
  height: 100rpx;
  padding: 30px 0 0 70rpx;
  padding-top: 20px;
  background-image: url(@/static/home/navigator_bg.png);
  // background-color: #90D7EC;
  background-size: cover;
  // #endif
  .back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64rpx;
    height: 64rpx;
    padding: 0 10rpx 0 26rpx;
    margin: 16rpx 10rpx;
    font-size: 28rpx;
    color: #fff;
  }
  .title {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 100rpx;
    padding: 0 20%;
    margin: 0 24rpx;
    line-height: 100rpx;
  }
}
</style>
